<script setup lang="ts">
import type { Header } from "element-plus/es/components/table-v2/src/components/index.mjs";
import { ref, reactive, onMounted } from "vue";
import { RouterLink, RouterView } from "vue-router";
import ZhuYe from "@/views/Pu/ZhuYe.vue";
import AllClass from "@/views/Pu/AllClass.vue";

// 获取id引入的
import { useRoute } from "vue-router";
// 教师详情页API请求
import { TeacherDetail } from "@/api/Pu/qianTaiPu";

//  整体页面的数据   和  最新发布   和  Ta的合集课程
import { TeacherStore } from "@/stores/qianTaiPu/teacherDetailData";
// 获取id
const route = useRoute();
const activeIndex = ref("1");
const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath);
};

// 使用store（teacherDetailData）
const store = TeacherStore();

// 获取数据
onMounted(() => {
  initData();

  // 存id进入store
  console.log(route.query.id);
  store.Teaid = route.query.id;
});

// 初始化数据函数
const initData = () => {
  TeacherDetail(store.Teaid).then((resp) => {
    // TeacherDetail(1).then((resp)=>{
    store.TeacherData.splice(0, store.TeacherData.length);
    store.TeacherData.push(resp.data.data);
    console.log(store.TeacherData);
  });

  store.Teaid = "";
};

// 关注按钮
const GuanZhutext = ref(true);
const Text = ref("关注");
const GuanZhu = () => {
  if (GuanZhutext.value) {
    Text.value = "已关注";
    GuanZhutext.value = false;
  } else {
    Text.value = "关注";
    GuanZhutext.value = true;
  }
};
</script>
<template>
  <div class="common-layout">
    <el-container direction="vertical">
      <!-- 照片栏 -->
      <el-header>
        <div class="top">
          <!-- 左图像 -->
          <div class="leftHeader">
            <img :src="store.TeacherData[0].image" alt="" />
          </div>
          <!-- 右介绍 -->
          <div class="rightHeader">
            <div class="Tname">
              <span>{{ store.TeacherData[0].name }}</span>
              <el-button round @click="GuanZhu()" v-model="GuanZhutext">{{
                Text
              }}</el-button>
            </div>
            <ul class="Detail">
              <!-- 判断好评率 -->
              <template v-if="store.TeacherData[0].positive == undefined">
                <li>
                  好评率： 无
                  <span
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                </li>
              </template>
              <template v-else>
                <li>
                  好评率 {{ store.TeacherData[0].positive }}
                  <span
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                </li>
              </template>
              <!-- 判断学生数 -->
              <template v-if="store.TeacherData[0].stuNum == undefined">
                <li>
                  学生数 无
                  <span
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                </li>
              </template>
              <template v-else>
                <li>
                  学生数 &nbsp;{{ store.TeacherData[0].stuNum }}
                  <span
                    >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span
                  >
                </li>
              </template>
              <!-- 判断label标签 -->
              <template v-if="store.TeacherData[0].label != null">
                <li class="Nothree">
                  求知欲新职业教育：{{ store.TeacherData[0].label }}
                </li>
              </template>
              <template v-else>
                <li class="Nothree">求知欲新职业教育：无</li>
              </template>
            </ul>
          </div>
        </div>
      </el-header>

      <!-- 主页  课程列表 -->

      <el-menu
        :default-active="activeIndex"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
      >
        <RouterLink to="/TeachersDetail">
          <el-menu-item index="1" class="zhuye">主页</el-menu-item>
        </RouterLink>

        <RouterLink to="/TeachersDetail/MoreButton">
          <el-menu-item index="2" class="zhuye"> 课程详情 </el-menu-item>
        </RouterLink>
        <div class="input_box Search">
          <el-input class="search" placeholder="搜索课程">
            <template #append>
              <RouterLink to="/FrontFreeClass">
                <el-budtton>
                  <span class="iconfont icon-liwu"></span>
                </el-budtton>
              </RouterLink>
            </template>
          </el-input>
        </div>
      </el-menu>

      <el-container>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
/* .common-layout{
   width: 80%;
   margin: auto;
} */
/* 大容器 */
.el-container {
  height: 100%;
  /* margin: auto; */
}
.el-header,
.el-footer {
  height: 120px;
  background-color: rgb(21, 98, 150);
  color: white;
  text-align: center;
  line-height: 100px;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  /* line-height: 160px; */
}

/* 头像部分 */
.top {
  display: flex;
  height: 120px;
  background-color: rgb(21, 98, 150);
}
/* 左照片 */
.leftHeader {
  width: 140px;
  height: 150px;
  margin-top: 10px;
  margin-left: 20px;
  background-color: white;
}
.leftHeader img {
  width: 140px;
  height: 150px;
}

/* 右文字 */
.rightHeader {
  width: 800px;
}
/* 右老师名字 */
.Tname {
  width: 500px;
  height: 20px;
  text-align: left;
}
.Tname span {
  display: inline-block;
  font-size: 30px;
  margin-left: 30px;
}
.Tname .el-button {
  margin-left: 20px;
  margin-top: -15px;
}
/* 右ul */
.Detail {
  height: 50px;
  width: 700px;
  margin-left: 32px;
  margin-top: 20px;
  text-align: left;
  display: flex;
  font-size: 12px;
}
li {
  width: 100px;
  color: white;
}

.Nothree {
  width: 400px;
  text-align: left;
}

/* 主页一栏 */
.el-menu {
  margin-top: 40px;
  background-color: white;
  margin-bottom: 20px;
  margin-left: 20px;
  display: flex;
}
:deep(.el-menu-item) {
  text-align: center;
  color: black;
}
/* 搜索框栏 */
.Search {
  display: flex;
  width: 250px;
  justify-content: right;
  height: 35px;
  margin-left: 700px;
  margin-top: 14px;
}

/*搜索组件最外层div */
.input_box {
  width: 250px;
  margin-left: 600px;
  border-radius: 95px;
  border: 1px solid gainsboro;
}

/*搜索input框 */
:deep(.el-input__wrapper) {
  background-color: transparent;
  /*覆盖原背景颜色，设置成透明 */
  border-radius: 95px;
  box-shadow: 0 0 0 0;
}

/*搜索button按钮 */
:deep(.el-input-group__append) {
  background: white;
  border-radius: 95px;
  box-shadow: 0 0 0 0px;
}
.zhuye {
  display: flex;
  justify-content: center;
  align-items: center;
}
a {
  text-decoration: none;
}
</style>
